<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket测试</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>
<button onclick="onSendButtonClick()">发送</button>
<button onclick="onJhButtonClick()">交互</button>

<div id="content"></div>
</body>
<script type="text/javascript">
    var ws;
    // 检测浏览器是否支持webSocket
    if (typeof(WebSocket) == "undefined") {
        $("#content").html("您的浏览器不支持webSocket！");
        console.log("您的浏览器不支持WebSocket!");
    } else {
        $("#content").html("您的浏览器支持webSocket!");
        console.log("您的浏览器支持WebSocket!");

        //模拟产生clientID
        let clientID = Math.ceil(Math.random()*100);

        // 创建 WebSocket 对象, 注意请求路径！！！！
        ws = new WebSocket("ws://localhost:8080/WebSocketServer/1");

        // 与服务端建立连接时触发
        ws.onopen = function() {
            $("#content").append("<p>与服务端建立连接建立成功！您的客户端ID=" + clientID + "</p>");
            console.log("Socket 已打开");

            //模拟发送数据到服务器
            ws.send("你好服务端！我是客户端 "+clientID);
        };
        // 接收到服务端消息时触发
        ws.onmessage = function(msg) {
            $("#content").append("<p>接收到服务端消息:" + msg.data + "</p>");
            console.log("获得消息：" + msg.data);
            // 发现消息进入, 开始处理前端触发逻辑
        };
        // 关闭事件
        ws.onclose = function() {
            console.log("Socket已关闭");
        };
        // 发生了错误事件
        ws.onerror = function() {
            alert("Socket发生了错误");
            // 此时可以尝试刷新页面
        }
    }

    function onSendButtonClick(){
        console.log("开始发送");
        ws.send("这是来自客户端的消息" + location.href + " " + new Date());
    }

    function onJhButtonClick(){
        $.ajax({
            url: "http://localhost:8080/csdnScoket/websocket/push/1",
            data: { "message" : "我是消息" },
            type: "post",
            processData: false,
            contentType: false,
            success: function(result) {
                console.log(result);
                alert(result.msg);
            }
        })
    }

</script>
</html>
